<template>
    <div>
        <span class="demo">
            这是App.vue {{name}}
        </span>
        <span class="diy">这是scss自定义变量</span>
        <span  style="display:block;width:400px;background:gray;">行内样式1</span>
        <span  :style="{display:'block',width:'400px',background:'red'}">行内样式2</span>
        
        <img src="~@/assets/img/qq.png" alt="">
        <img src="~@/assets/img/1.jpg" alt="">
        
        <div style="width:100px; height:100px;" class="bg">
            
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:'cuikaitong'
        }
    }
}
</script>
<style lang="scss"  scoped>
    @import '~@/styles/vars.scss';
    .demo{
        font-size: 20px;
        color: red;
    }
    .diy{
        color: $base-color;
    }
    .bg{
        background: url('~@/assets/img/1.jpg');
    }
</style>

